<template>
	<view>
		<view class="info">
			<label class="info-number">订单号：1234512316546</label>
			<view>
				<view class="info-main flex-between">
					<image src="https://alipic.lanhuapp.com/xd0cdfd74b-ef97-4ec2-9c91-ddd2bc15bf5e" mode="aspectFill"></image>
					<view class="flex-column-between" style="width: 340upx;height: 100%;">
						<label class="info-main-title">西班牙伊比利亚黑猪肉</label>
						<label class="info-main-info">西班牙黑猪肉带骨猪里脊肉 新鲜猪排，经核酸检测放心食用 经核酸检测放心食用 经核酸检测放心食用</label>
						<label style="font-size: 20upx;font-weight: 500;color: #FF9C46;white-space: nowrap;">发货时间：卖家承诺7个工作日左右发货</label>
					</view>
				</view>
				<view class="flex-between" style="margin-top: 30upx; font-size: 24upx;color: #666666;">
					<label>购买数量</label>
					<van-stepper :value="count" @change="count=$event.detail" integer disable-input />
				</view>
			</view>
			<van-divider hairline />
			<van-radio-group :value="chooseAddress">
				<van-cell clickable @click="chooseAddress='0'">
					<view slot="title" class="info-address-item flex-between">
						<image src="../../static/location.png"></image>
						<view style="margin-left: 5upx;width: 500upx;">
							<view>
								<label>张三</label>
								<label style="margin-left: 20upx;">156845462135</label>
							</view>
							<view>成都市金牛区人民北路成都市金牛区人民北路</view>
						</view>
						<van-radio name="0" checked-color="#FBC241" />
					</view>
				</van-cell>
				<van-cell clickable @click="chooseAddress='1'">
					<view slot="title" class="info-address-item flex-between">
						<image src="../../static/location.png"></image>
						<view style="margin-left: 5upx;width: 500upx;">
							<view>
								<label>张三</label>
								<label style="margin-left: 20upx;">156845462135</label>
							</view>
							<view>成都市金牛区人民北路成都市金牛区人民北路</view>
						</view>
						<van-radio name="1" checked-color="#FBC241" />
					</view>
				</van-cell>
				<button class="button" style="width: 600upx;" @click="showAddAddress=true">添加地址</button>
			</van-radio-group>
			<van-action-sheet :show="showAddAddress" title="添加地址" @click-overlay="showAddAddress=false" @close="showAddAddress=false">
				<van-field label="送货地址" :value="add.address" @input="add.address=$event.detail" />
				<van-field label="门牌号" :value="add.addressNumber" @input="add.addressNumber=$event.detail" />
				<van-field label="收货人" :value="add.name" @input="add.name=$event.detail" />
				<van-field label="手机号" type="number" :value="add.tel" @input="add.tel=$event.detail" />
				<button class="button">确认添加</button>
			</van-action-sheet>
			<van-divider hairline />
			<view class="server flex-around">
				<view class="buttonCenter" style="width: 68upx;height: 34upx;background: #FFB758;border-radius: 4upx;">服务</view>
				<view class="server-label flex-between">
					<image src="../../static/yun.png" mode="aspectFill"></image>
					<label class="server-label-text">运费特惠</label>
				</view>
				<view class="server-label flex-between">
					<image src="../../static/tui.png" mode="aspectFill"></image>
					<label class="server-label-text">无忧退货</label>
				</view>
				<view class="server-label flex-between">
					<image src="../../static/you.png" mode="aspectFill"></image>
					<label class="server-label-text">直邮送达</label>
				</view>
			</view>
			<van-divider hairline />
			<view style="text-align: right;">
				<view style="font-size: 24upx;font-weight: bold;color: #333333;">运费：￥20.00</view>
				<view class="flex-between" style="margin-top: 30upx;flex-direction: row-reverse;">
					<view style="font-size: 32upx;font-weight: bold;color: #333333;">合计<label style="color:#FF4646">￥1500.00</label></view>
					<view class="flex-between" v-if="type!='normal'">
						<view class="price buttonCenter">{{type=='group'?'拼团':'抢购'}}倒计时</view>
						<view style="margin-left: 10upx;font-size: 32upx;font-weight: bold;color: #FF5353;">06:30:00</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pay">
			<van-radio-group :value="payMethod">
				<van-cell clickable @click="payMethod='0'">
					<view slot="title" class="pay-item flex-between">
						<view class="flex-align">
							<image src="../../static/zhifubao.png" />
							<label style="margin-left: 10upx;">支付宝支付</label>
						</view>
						<van-radio name="0" checked-color="#FBC241" />
					</view>
				</van-cell>
				<van-cell clickable @click="payMethod='1'">
					<view slot="title" class="pay-item flex-between">
						<view class="flex-align">
							<image src="../../static/yue.png" />
							<label style="margin-left: 10upx;">余额支付</label>
						</view>
						<van-radio name="1" checked-color="#FBC241" />
					</view>
				</van-cell>
			</van-radio-group>
		</view>
		<view class="footer">
			<view class="flex-between" style="height: 98upx;">
				<view class="footer-info buttonCenter">应付：<label style="color:#FF8658;">￥1500.00</label></view>
				<view class="footer-button buttonCenter">去支付</view>
			</view>
		</view>
		<view class="footer-seat">
			<view style="height: 98upx;"></view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				type:'normal',
				count:1,
				chooseAddress:'0',
				showAddAddress:false,
				add:{
					address:'',
					addressNumber:'',
					name:'',
					tel:''
				},
				payMethod:'0'
			}
		},
		methods:{
			
		}
	}
</script>

<style>
	page{
		background-color: #F7F7F7;
	}
</style>
<style lang="scss" scoped>
	.info{
		padding: 30upx;
		margin: 24upx;
		background: #FFFFFF;
		border-radius: 10upx;
		.info-number{
			font-size: 28upx;
			font-weight: bold;
			color: #666666;
		}
		.info-main{
			margin-top: 40upx;
			width: 100%;
			height: 200upx;
			image{
				width: 266upx;
				height: 200upx;
			}
			.info-main-title{
				width: 340upx;
				font-size: 32upx;
				font-weight: bold;
				color: #333333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.info-main-info{
				width: 340upx;
				height: 80upx;
				font-size: 24upx;
				font-weight: 500;
				color: #666666;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
		.info-address-item{
			font-size: 28upx;
			font-weight: 500;
			color: #666666;
			image{
				width: 32upx;
				height: 32upx;
			}
		}
	}
	.server{
		font-size: 24upx;
		font-weight: 500;
		color: #FFFFFF;
		background-color: #FFFFFF;
		.server-label{
			width: 138upx;
			height: 32upx;
			image{
				width: 32upx;
				height: 32upx;
			}
			.server-label-text{
				color: #666666;
			}
		}
	}
	.price{
		width: 158upx;
		height: 44upx;
		background: #FF5353;
		border-radius: 10upx;
		font-size: 24upx;
		font-weight: bold;
		color: #FFFFFF;
	}
	.pay{
		margin-top: 30upx;
		padding: 26upx;
		margin-bottom: 182upx;
		background-color: #FFFFFF;
		.pay-item{
			font-size: 28upx;
			font-weight: 400;
			color: #666666;
			image{
				width: 50upx;
				height: 50upx;
			}
		}
	}
	.footer{
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0upx;
		.footer-info{
			width: 448upx;
			height: 98upx;
			font-size: 32upx;
			font-weight: bold;
			color: #333333;
		}
		.footer-button{
			width: 302upx;
			height: 98upx;
			background: #FBC241;
			font-size: 32upx;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
</style>
